<script setup lang="ts">
// 引入组件
import Sacle from "../silde/scale.vue";
import { reactive } from "vue";

const data = reactive({
  sildeList: [
    {
      src: "https://img.cctvch.cn/uploads/9bc73a62897892b6fa607e188e9131b6.png",
      bigSrc: "https://img.cctvch.cn/uploads/fec13f00e2045f51da014eaaf8d0eb73.png",
      index: 0,
      alt: "图片1",
    },
    {
      src: "https://img.cctvch.cn/uploads/ba0059b313931b8cba17021823abc6a1.png",
      bigSrc: "https://img.cctvch.cn/uploads/7bc81278f107f80aaeb4b07dcd14489a.png",
      index: 1,
      alt: "图片2",
    },
    {
      src: "https://img.cctvch.cn/uploads/029519fe38775a765980c57d4364e848.png",
      bigSrc: "https://img.cctvch.cn/uploads/b10d4e81f585eb5394e003d62c752e9b.png",
      index: 2,
      alt: "图片3",
    },
    {
      src: "https://img.cctvch.cn/uploads/68efc4142f5517d8669f78a32a6428ad.png",
      bigSrc: "https://img.cctvch.cn/uploads/2ad77040eed6c95316ee456a80f0d090.png",
      index: 3,
      alt: "图片4",
    },
    {
      src: "https://img.cctvch.cn/uploads/ba0059b313931b8cba17021823abc6a1.png",
      bigSrc: "https://img.cctvch.cn/uploads/7bc81278f107f80aaeb4b07dcd14489a.png",
      index: 1,
      alt: "图片2",
    },
    {
      src: "https://img.cctvch.cn/uploads/029519fe38775a765980c57d4364e848.png",
      bigSrc: "https://img.cctvch.cn/uploads/b10d4e81f585eb5394e003d62c752e9b.png",
      index: 2,
      alt: "图片3",
    },
    {
      src: "https://img.cctvch.cn/uploads/68efc4142f5517d8669f78a32a6428ad.png",
      bigSrc: "https://img.cctvch.cn/uploads/2ad77040eed6c95316ee456a80f0d090.png",
      index: 3,
      alt: "图片4",
    }
  ]
});
</script>
<template>
  <main class="explore-wrap">
    <div class="banner"></div>
    <section class="explore-box">
      <section class="program-wrap">
        <section class="fixed-width">
          <h3 class="first-title text-center font-md font-bolder">
            <span class="color-title">《中国碳索家》节目</span>
          </h3>
          <p class="font-sm text-muted text-center">双碳/专题/访谈类节目</p>
          <section class="explore-content explore-program flex justify-between">
            <section class="program-img">
              <img src="https://img.cctvch.cn/uploads/b27be92bb18c00f781f11e106efbddac.png" alt="" />
            </section>
            <article class="program-person section-spacing font">
              <h4 class="second-title font-m font-blod">节目简介</h4>
              <p>
                2021年全国两会，政府工作报告中“碳达峰”“碳中和”首次写入政府工作报告，“双碳”目标已成为长期国家战略，政策指导层面已经越来越清晰。
              </p>
              <p>
                国家发改委、财政部中国清洁发展机制基金、央视网、清华大学、中国科学院大学、中关村绿色产业联盟，共同推出《中国碳索家》大型融媒体节目，展现中国为实现联合国《巴黎协定》与碳中和承诺所采取的政策和措施，体现大国担当。
              </p>
              <p class="no-spacing">
                《中国碳索家》节目深入展现中国碳中和进程中各个领域的探索者，从解读国家政策、双碳技术创新、产业领域发展等宏观内容，到展现区域、企业、个人的实际应用。
              </p>
              <p>
                每一集详解一位“碳索家”在碳达峰碳中和的挑战与机遇下，如何探索出低碳可持续发展的新制度、新路径、新产业、新科技和新商业。
              </p>
            </article>
          </section>
        </section>
      </section>
    </section>
    <!-- 图片广告 start-->
    <section class="explore-bg explore-bg1">
      <section class="explore-bg-inner flex justify-between">
        <section>
          <p class="explore-bg-title font-m">播放平台</p>
          <p class="explore-bg-text font">
            <span>央视网财经频道</span>
            <span class="explore-bg1-text-space20">抖音</span>
            <span class="explore-bg1-text-space20">哔哩哔哩</span>
            <span class="explore-bg1-text-space20">微视频</span>
          </p>
          <p class="explore-bg-text font">
            <span>微信公众号</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="explore-bg1-text-space20">快手</span>
            <span class="explore-bg1-text-space20">喜马拉雅</span>
          </p>
        </section>
        <section>
          <p class="explore-bg-title font-m">节目形式</p>
          <p class="explore-bg-text font">大型融媒体<br />音视频类节目</p>
        </section>
        <section>
          <p class="explore-bg-title font-m">内容方向</p>
          <p class="explore-bg-text font">
            <span>专家访谈 - 政策解读、科技进步、未来前瞻等</span>
            <span class="explore-bg1-text-space40">区域发展 -地区经济结构、产业规划等</span>
            <span class="explore-bg1-text-space40">能源行业 - 传统能源升级优化、新能源技术快速发展等</span>
          </p>
          <p class="explore-bg-text font">
            <span>工业制造 - 汽车、金属、化工、造纸、航空等 </span>
            <span class="explore-bg1-text-space">科技应用 -AI、大数据等技术在双碳背景的应用</span>
          </p>
        </section>
      </section>
    </section>
    <section class="explore-box">
      <section class="fixed-width">
        <h3 class="first-title text-center font-md font-bolder">
          <span class="color-title">双碳类峰会</span>
        </h3>
        <p class="font-sm text-muted text-center">
          展+会结合<br />搭建从政策到实施的全面交流合作平台
        </p>
        <section>
          <section class="explore-content flex justify-between">
            <section class="two-columns">
              <article class="section-spacing font">
                <h4 class="second-title font-m font-blod">全球共识</h4>
                <p>
                  从20世纪80年代开始，随着全球气温不断升高，气候问题引起了广泛关注。人们开始逐渐重视全球气候变暖导致的一系列问题，联合国气候变化框架公约(UNFCCC)、《巴黎协定》等有关气候的约定不断出台。
                </p>
                <p>
                  因此，应对气候变化已经成为21世纪人类社会面临的紧迫挑战，推进绿色发展成为全球共识。
                </p>
              </article>
            </section>
            <section class="two-columns">
              <article class="section-spacing font">
                <h4 class="second-title font-m font-blod">强有力的措施</h4>
                <p>
                  2020年9月22日，习近平主席在联合国大会上宣布，中国将采取更加有力的措施，“二氧化碳排放力争于2030年前达到峰值，努力争取2060年前实现碳中和”。
                </p>
              </article>
              <section class="flex justify-between">
                <section class="flex font">
                  <img class="meeting-icon meeting-icon1 flex-shrink"
                    src="https://img.cctvch.cn/uploads/70ac2171ad1b71ee8cb868b04eec0e7e.png" alt="图片" />
                  <section class="meeting-icon-space">
                    <p class="text-left font-bolder">
                      <span class="color-title">碳达峰</span>
                    </p>
                    <p>二氧化碳排放力争于2030年前达到峰值</p>
                  </section>
                </section>
                <section class="flex font">
                  <img class="meeting-icon meeting-icon2 flex-shrink"
                    src="https://img.cctvch.cn/uploads/4f70767f4464b25eb4f4e20832631e50.png" alt="" />
                  <section class="meeting-icon-space">
                    <p class="text-left font-bolder">
                      <span class="color-title">碳中和</span>
                    </p>
                    <p>努力争取2060年前实现碳中和</p>
                  </section>
                </section>
              </section>
            </section>
          </section>
          <section>
            <article class="section-spacing font">
              <h4 class="second-title font-m font-blod">
                双碳类展会结合，全面交流的合作平台
              </h4>
              <p>
                双碳类峰会将围绕“碳达峰、碳中和”的主题，邀请政府机构、行业专家、工业制造、化工、能源、汽车、钢铁等领域的企业，从碳中和的政策规划、标准、发展形势，实践以及低碳技术解决方案等热点内容进行理论与实践案例分享，为实现碳中和目标及低碳转型规划中提供有价值的信息与技术指导，进而让业者更加清晰了解行业的最新趋势与挑战，应对调整。
              </p>
              <p>
                双碳类峰会将围绕“碳达峰、碳中和”的主题，邀请政府机构、行业专家、工业制造、化工、能源、汽车、钢铁等领域的企业，从碳中和的政策规划、标准、发展形势，实践以及低碳技术解决方案等热点内容进行理论与实践案例分享，为实现碳中和目标及低碳转型规划中提供有价值的信息与技术指导，进而让业者更加清晰了解行业的最新趋势与挑战，应对调整。
              </p>
            </article>
          </section>
        </section>
      </section>
    </section>
    <!-- 图片广告 start-->
    <section class="explore-bg explore-bg2">
      <section class="explore-bg-inner flex justify-around">
        <section>
          <p class="explore-bg-title-en font-m">
            2022<br />CHINA CARBON <br />NEUTRAL SUMMIT
          </p>
        </section>
        <section>
          <p class="explore-bg-title font">参会企业</p>
          <p class="explore-bg-text font">
            政府机构、行业专家、工业制造、化工、能源、汽车、钢铁...
          </p>
        </section>
        <section>
          <p class="explore-bg-title font">理论与实践案例分享</p>
          <p class="explore-bg-text font">
            政策规划、标准、发展形势，实践以及低碳技术解决方案等热点内容
          </p>
        </section>
      </section>
    </section>
    <section class="explore-box">
      <section class="fixed-width">
        <h3 class="first-title text-center font-md font-bolder">
          <span class="color-title">《中国碳索家》 杂志</span>
        </h3>
        <p class="font-sm text-muted text-center">
          研究节能减碳路径，推动绿色循环发展<br />探索双碳政策方针，助力“绿色中国”愿景
        </p>
        <Sacle :sildeList="data.sildeList" bgWidth="1440" bgHeight="466" :morenSrc="data.sildeList[0].bigSrc"></Sacle>
      </section>
    </section>
  </main>
</template>
<style scope="">
/* 页面固定宽度 */
.fixed-width {
  margin: 0 auto;
  width: 1440px;
}

/* 页面一级标题 */
.first-title {
  height: 80px;
  line-height: 80px;
}

/* 页面二级标题 */
.second-title {
  margin: 43px 0px 33px;
}

/* 彩色文字 */
.color-title {
  color: #606676;
  background: linear-gradient(to right, #221a8a 0%, #ff000a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.explore-wrap {
  margin-bottom: 78px;
}

.banner {
  min-width: 1440px;
  height: 0;
  padding-bottom: 30.2%;
  background: url('https://img.cctvch.cn/uploads/47523ba009b278894f278c9231e1d13a.png');
  background-size: 100% 100%;
}

.explore-box {
  margin-top: 66px;
}

.program-wrap {
  position: relative;
}

.program-wrap::before {
  position: absolute;
  top: 146px;
  left: 0;
  content: "";
  display: block;
  width: 450px;
  height: 351px;
  background: url("https://img.cctvch.cn/uploads/7ece9838b0093c0898ef464b4524fe82.png");
  background-size: 100% 100%;
}

.explore-content {
  flex-direction: row;
}

.program-img {
  margin-top: -44px;
  width: 470px;
  height: 480px;
}

.program-img img {
  display: block;
  width: 100%;
  height: 100%;
}

.program-person {
  width: 940px;
  line-height: 30px;
}

.section-spacing p {
  margin-bottom: 44px;
  text-indent: 2em;
}

.section-spacing .no-spacing {
  margin-bottom: 0px;
}

/* 峰会分列*/
.two-columns {
  width: 650px;
}

.meeting-icon {
  display: block;
}

.meeting-icon1 {
  width: 65px;
  height: 73px;
}

.meeting-icon2 {
  width: 75px;
  height: 69px;
}

.meeting-icon-space {
  margin-left: 22px;
}

.meeting-icon-space .color-title {
  margin-bottom: 23px;
}

/* 图片广告位置 */
.explore-bg {
  width: 100%;
  margin-top: 55px;
}

.explore-bg1 {
  padding-top: 240px;
  height: 336px;
  background: url("https://img.cctvch.cn/uploads/22172c856126e405d68c4853608b6a68.png");
  background-size: 100% 100%;
}

.explore-bg2 {
  padding-top: 33px;
  height: 110px;
  background: url("https://img.cctvch.cn/uploads/7543befbcbe4137e15af8cd82a7c7d3a.png");
  background-size: 100% 100%;
}

.explore-bg-inner {
  margin: 0 auto;
  width: 1440px;
}

.explore-bg-title {
  color: #c6c6c6;
}

.explore-bg-text {
  color: #fff;
  line-height: 30px;
}

.explore-bg1-text-space20 {
  margin-left: 20px;
}

.explore-bg1-text-space40 {
  margin-left: 40px;
}

.explore-bg-title-en {
  margin-top: -16px;
  color: #fff;
  line-height: 26px;
}
</style>